<template>
	<div class="tables-cnt">
		<h1>mock 数据获取</h1>
		<br />
		<Button type="primary" @click="addModel">新增</Button>
		<Table class="tables" border :columns="columns" :data="tablesData" width="800">
			<template slot-scope="{ row }" slot="name">
				<strong>{{ row.name }}</strong>
			</template>
			<template slot-scope="{ row }" slot="age">
				<strong>{{ row.age }}</strong>
			</template>
			<template slot-scope="{ row }" slot="sex">
				<strong>{{ row.sex=='1'?'男':'女' }}</strong>
			</template>
			<template slot-scope="{ row }" slot="birth">
				<strong>{{ row.birth }}</strong>
			</template>
			<template slot-scope="{ row }" slot="addr">
				<strong>{{ row.addr }}</strong>
			</template>
			<template slot-scope="{ row, index }" slot="action">
				<Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">修改</Button>
				<Button type="error" size="small" @click="remove(row.id)">删除</Button>
			</template>
		</Table>
		<Page
			:total="tablesTotal"
			:current="current"
			:page-size="pageSize"
			show-total
			@on-change="changePage"
		/>
		<Modal v-model="modalShow" :title="modelTypes=='add'?'新增':'修改'" :footer-hide="true">
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
				<FormItem label="姓名" prop="name">
					<Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
				</FormItem>
				<FormItem label="年龄" prop="age">
					<Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
				</FormItem>
				<FormItem label="出生日期">
					<DatePicker type="date" format="yyyy-MM-dd" placeholder="请选择出生日期" v-model="formValidate.birth"></DatePicker>
				</FormItem>
				<FormItem label="性别" prop="sex">
					<RadioGroup v-model="formValidate.sex">
						<Radio label="1">男</Radio>
						<Radio label="2">女</Radio>
					</RadioGroup>
				</FormItem>

				<FormItem label="地址" prop="desc">
					<Input
						v-model="formValidate.addr"
						type="textarea"
						:autosize="{minRows: 2,maxRows: 5}"
						placeholder="请输入地址..."
					></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
					<Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>

<script>
export default {
	data() {
		return {
			// 字段显示
			columns: [
				{
					title: "姓名",
					slot: "name",
					width: 100
				},
				{
					title: "年龄",
					slot: "age",
					width: 100
				},
				{
					title: "性别",
					slot: "sex",
					width: 100
				},
				{
					title: "生日",
					slot: "birth",
					width: 100
				},
				{
					title: "地址",
					slot: "addr"
				},
				{
					title: "操作",
					slot: "action"
				}
			],
			// table数据
			tablesData: [],
			tablesTotal: 0, //table数据总数
			current: 1,
			pageSize: 10,
			modelTypes: "add", //弹窗的类型
			//新增
			modalShow: false,
			formValidate: {
				name: "",
				age: "",
				sex: "1",
				birth: "",
				addr: ""
			},
			ruleValidate: {
				name: [
					{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}
				],
				age: [
					{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}
				],
				sex: [
					{
						required: true,
						message: "不能为空",
						trigger: "change"
					}
				],
				addr: [
					{
						required: false
					}
				]
			}
		};
	},
	mounted() {
		let params = {
			name: "",
			current: 1,
			pageSize: 10
		};
		this.getTablesDtabel(params);
	},
	methods: {
		// 获取table的数据
		getTablesDtabel(params) {
			this.$http
				.get("/table/list", { params })
				.then(res => {
					this.tablesData = res.data.data;
					this.tablesTotal = res.data.count;
				})
				.catch(err => {
					console.log("报错：", err);
				});
		},
		// 分页查询
		changePage(page) {
			let params = {
				name: "",
				current: page,
				pageSize: 10
			};
			this.getTablesDtabel(params);
		},
		// 新增
		addModel() {
			this.modelTypes = "add";
			this.modalShow = true;
		},
		//修改
		edit(row) {
			this.modelTypes = "edit";
			this.modalShow = true;
			this.formValidate = row;
			this.formValidate.sex = this.formValidate.sex + "";
		},
		//提交
		handleSubmit(name) {
			this.$refs[name].validate(valid => {
				if (valid) {
					if (this.modelTypes == "add") {
						this.$http
							.post("/table/add", this.formValidate)
							.then(res => {
								let params = {
									name: "",
									current: 1,
									pageSize: 10
								};
								this.getTablesDtabel(params);
								this.$Message.success("新增成功");
								this.modalShow = false;
								this.handleReset();
							})
							.catch(err => {
								console.log("报错：", err);
							});
					} else {
						this.$http
							.post("/table/edit", this.formValidate)
							.then(res => {
								let params = {
									name: "",
									current: 1,
									pageSize: 10
								};
								this.getTablesDtabel(params);
								this.$Message.success("修改成功");
								this.modalShow = false;
								this.handleReset();
							})
							.catch(err => {
								console.log("报错：", err);
							});
					}
				} else {
					this.$Message.error("Fail!");
				}
			});
		},
		//重置
		handleReset() {
			this.formValidate = {
				name: "",
				age: "",
				sex: "1",
				birth: "",
				addr: ""
			};
		},
		//删除 数据
		remove(index) {
			// this.tablesData.splice(index, 1);// 表面删除数据
			this.$http
				.post("/table/del", {
					id: index
				})
				.then(res => {
					if (res.data.code == 200) {
						this.$Message.info("删除成功");
						let params = {
							name: "",
							current: 1,
							pageSize: 10
						};
						this.getTablesDtabel(params);
					} else {
						this.$Message.info(res.data.message);
					}
				})
				.catch(err => {
					console.log("报错：", err);
				});
		}
	}
};
</script>

<style scoped>
.tables-cnt {
	padding: 20px;
}
.tables-cnt .tables {
	margin: 20px 0;
}
</style>